<template>
  <div class="article-item">
      <van-cell 
        class="article-desc" 
        :to="{
          name:'article',
          params:{
           articleId:article.art_id
          }
        }"
      >
           <div class="title van-multi-ellipsis--l3" slot="title">{{article.title}}</div>
           
           <div slot="label">
              <div class="label-img" v-if="article.cover.type===3">
                 <div class="cover-desc">
                       <van-image
                          fit="cover"
                          class="cover-img"
                          v-for="(img,index) in article.cover.images"
                          :key="index"
                          :src="img"
                        />
                 </div>
              </div>
             <div class="label-wrap">
                <span>{{article.aut_name}}</span>
                <span>{{article.comm_count}}评论</span>
                <span>{{article.pubdate | relativeTime}}</span>
             </div>
           </div>
           <!-- 一个图片 -->
           <van-image
             v-if="article.cover.type===1"
              fit="cover"
              enter-class="right-img"
              :src="article.cover.images[0]"
            />
      </van-cell>
  </div>
</template>

<script>
export default {
  name: 'NewsIndex',
  props:{
    article:{
      type:Object,
      required:true
    }
  },
  components: {},
  directives: {},
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.title{
  font-size:16px;
  color: #3a3a3a;

}
/deep/ .van-cell__value{
    flex: unset;
    width: 116px;
    height: 73px;
    margin-left: 20px;
}
.right-img{
   width: 100px;
  height: auto;
}
.cover-desc{
  display: flex;
  flex-flow: row nowrap;
  .cover-img{
    flex:1;
    height: 73px;
    margin-right:5px;
    margin-top:5px;
    margin-bottom: 5px;
    &:last-child{
      margin-right: 0;
    }
  }
}
.label-wrap {
  font-size: 11px;
  color: #3a3a3a;
  span{
    margin-right:12px;
  }
}
</style>